<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>资金使用情况</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/jquery-1.11.3.js"></script>
	<link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/default/easyui.css" />
	<link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/icon.css" />
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/jquery.easyui.patch.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/util/easyui-util.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/system/system-util.js"></script>
	<!-- 引入 ECharts 文件 -->
	<script src="<%=path %>/resources/script/echarts/echarts.js"></script>

  </head>
  
  <body>
  	<div>
  		<input type="hidden" id="fpid" />
  		<input type="hidden" id="tpid" />
    	<table>
   			<tr>
   				<td><input id="projects" name="projects" class="easyui-validatebox" style="width: 150px;" /></td>
   				<td><a id="btn_return" href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search">返回上一页</a></td>
   			</tr>
   		</table>
    </div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
    <div id="weight_progress" style="width: 480px;height:330px; margin: 0 auto;"></div>
<script type="text/javascript">
var contextPath = "<%=path%>";
var weight_progress_myChart;

$(function(){
	$('#btn_return').hide();
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('weight_progress'));
   	weight_progress_myChart = myChart;
   	var _click_piId;		
	/*** 初始化项目库 */
	$('#projects').combobox({
        url:'projectIndex/projectIndexs.shtml',
        method:'get',
        valueField:'id',
        textField:'name',
        editable : false,
        panelHeight:'auto',
        onSelect : function (record) {
        	var _projectIndexId = record.id;
        	$('#fpid').val(_projectIndexId);
        	/*** 初始化报表 */
        	myChart.showLoading();
        	$.post('bireport/weightProgressData.shtml', {projectIndexId : _projectIndexId}, function(data){
        		myChart.hideLoading();
        		initCharts(myChart, data);
        	});
        },
        onLoadSuccess : function () {
        	var data = $('#projects').combobox('getData');
        	if (data.length > 0) {
				$('#projects').combobox('select', data[0].id);
			}
        }
     });
     
     $('#btn_return').click(function(){
     		var r_pid = $('#tpid').val();
     		if (null != r_pid && '' != r_pid) {
     			weight_progress_myChart.showLoading();
		    	$.post('bireport/weightProgressData.shtml', {projectIndexId : r_pid}, function(data){
		       		weight_progress_myChart.hideLoading();
		       		initCharts(weight_progress_myChart, data);
		       	});	
     		}
       });
});

function initCharts(myChart, data) {
	var _title = data.data.name + '权重百分比';
	var dataObj = data.data.data;
	var _xAxis_data = new Array();
	var _progress_data = new Array();
	var _leaf = data.data.leaf;
	var _parent_piId = data.data.ppiId;
	$('#tpid').val(_parent_piId);
	if (null == _parent_piId || '' == _parent_piId) {
		$('#btn_return').hide();
	}
	for (var i=0; i<dataObj.length; i++) {
		_xAxis_data.push(dataObj[i].name);
		var progress_obj = {};
		progress_obj['name'] = dataObj[i].name;
		progress_obj['value'] = dataObj[i].progress;
		progress_obj['piId'] = dataObj[i].piId;
		progress_obj['leaf'] = dataObj[i].leaf;
		progress_obj['ppiId'] = dataObj[i].ppiId;
		_progress_data.push(progress_obj);
	}
    // 指定图表的配置项和数据
    var option = {
    	/* title : {
	        text: _title,
	        x:'center'
	    }, */
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    legend: {
	    	orient: 'vertical',
		    left: 'left',
		    data:['权重百分比']
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis : [
	        {
	            type : 'category',
	            axisLabel : {
	            	interval : 0,
	            	rotate : 15
	            },
	            data : _xAxis_data
	           /*  data:['1.办学理念','2.学校治理','3.办学机制',
		        '4.专业建设','5.教学改革','6.师资队伍',
		        '7.实训条件','8.信息化建设','9.服务能力'] */
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'权重百分比',
	            type:'bar',
	            data : _progress_data
	            /* data:[1000, 1300, 0, 500, 1000, 666,
	            3355, 2233, 897] */
	        }
	    ]
	};


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    
    myChart.on('click', function (params) {
    	var _leaf = params.data.leaf;
    	if (!_leaf) {
        	myChart.clear();
        	myChart.showLoading();
        	$.post('bireport/weightProgressData.shtml', {projectIndexId : params.data.piId}, function(data){
        		myChart.hideLoading();
        		initCharts(myChart, data);
        		$('#btn_return').show();
        	});	
    	} else {
    		//$.messager.alert('warning', '不可以！', 'warning');
    	}
    });
}
</script>
  </body>
</html>
